iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0
Modern Web

Webpack with ASP.NET MVC系列 第 17

Webpack Plugin 介紹 - 錯誤處理篇

  • 分享至 

  • xImage
  •  

Friendly-Errors-Webpack-Plugin

透過這個 Plugin 可以讓 Webpack Bundle 時發生的錯誤,透過比較友善清晰的方式顯示出來。
使用方式如下:

先安裝 Plugin

npm i friendly-errors-webpack-plugin -D

設定檔調整如下

webpack.common.js
var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
module.exports = {
  plugins: [
    new FriendlyErrorsWebpackPlugin()
  ]
}

設定非常簡單,來看看官網的截圖效果

打包成功

Compiled Successfully

打包失敗

Failed to Compile

也可以自定義一些成功訊息

webpack.common.js
var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
module.exports = {
  plugins: [
    new FriendlyErrorsWebpackPlugin({
    compilationSuccessInfo: {
      messages: ['Application is running here http://localhost:3000'],
      notes: ['Bundle Success!']
    })
  ]
}

詳細使用方式請看這裡


Error-Overlay-Webpack-Plugin

當頁面出錯時,這個 Plugin 能清楚的秀出頁面上的錯誤程式碼位置,有利於開發階段的除錯。

實際使用畫面

error-overlay-webpack-plugin示意圖

先安裝 Plugin

npm i error-overlay-webpack-plugin -D

設定檔調整如下

webpack.common.js
var ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
module.exports = {
  plugins: [
    new ErrorOverlayPlugin()
  ]
}

這樣就能正常使用囉,一般來說只會應用在開發階段,Production 記得要拿掉喔。

詳細使用方式請看這裡


上一篇
Webpack Plugin 介紹 - 檔案處理篇
下一篇
Webpack Plugin 介紹 - 分析工具篇
系列文
Webpack with ASP.NET MVC30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言